<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/MainTemplate.xhtml">
		
	<ui:define name="content">
	
	<script>
			function checaPswd() {

				var senha1 = document.getElementById("formulario:idSenha").value;
				var senha2 = document.getElementById("formulario:idSenha2").value;

				if (senha1 != senha2) {
					alert("As senhas digitas são diferentes!");
				}
			}
	</script>
	
		<h:form id="formulario">
			<h:panelGrid style="margin: 0 auto;"
				rendered="#{cadastroBean.stateUsuario}">

				<h:outputLabel value="Nome"/>

				<p:inputText id="idNome" value="#{cadastroBean.usuario.nome}" />

				<h:outputLabel value="E-mail" />

				<p:inputText id="idEmail" value="#{cadastroBean.usuario.email}" />

				<h:outputLabel value="Login" />

				<p:inputText id="idLogin" value="#{cadastroBean.usuario.login}" />

				<h:outputLabel value="Senha" />

				<h:panelGrid columns="3">
					<p:password id="idSenha" size="7"
						value="#{cadastroBean.usuario.senha}">
						<f:validateLength minimum="6" maximum="10"/>
					</p:password>
					<p:password id="idSenha2" size="7" value="#{cadastroBean.senhaAux}"
						onblur="checaPswd();" />
				</h:panelGrid>

				<h:outputLabel value="Data Nascimento" />

				<p:calendar id="idDtNascimento" locale="pt" navigator="true"
					pattern="dd/mm/yyyy" value="#{cadastroBean.usuario.dataNascimento}">

				</p:calendar>

				<h:outputLabel value="Telefone" />

				<p:inputMask id="idTelefone"
					value="#{cadastroBean.usuario.telefone}" mask="(99)9999-9999"></p:inputMask>

				<h:outputLabel value="Celular" />

				<p:inputMask id="idCelular" value="#{cadastroBean.usuario.celular}"
					mask="(99)9999-9999"></p:inputMask>

				<p:commandButton actionListener="#{cadastroBean.changeState}"
					update="@form" />

			</h:panelGrid>

			<h:panelGrid id="idEnderecoPanel" style="margin: 0 auto;"
				rendered="#{cadastroBean.stateEndereco}">

				<p:selectOneMenu id="idEstado"
					value="#{cadastroBean.estadoSelecionado}"
					converter="selectOneUsingObjectConverter"
					items="#{cadastroBean.estados}">
					<f:selectItems value="#{cadastroBean.estados}" var="estado"
						itemLabel="#{estado.sigla}" itemValue="#{estado}" />
					<p:ajax process="formulario:idEstado" update="formulario:idCidade"
						listener="#{cadastroBean.completeCidades}" />
				</p:selectOneMenu>

				<p:selectOneMenu id="idCidade"
					value="#{cadastroBean.cidadeSelecionada}"
					converter="selectOneUsingObjectConverter"
					items="#{cadastroBean.cidades}">
					<f:selectItems value="#{cadastroBean.cidades}" var="cidade"
						itemLabel="#{cidade.nome}" itemValue="#{cidade}" />
				</p:selectOneMenu>

				<p:outputLabel value="Bairro" />
				<p:inputText id="idBairro" value="#{cadastroBean.endereco.bairro}" />

				<p:outputLabel value="Rua" />
				<p:inputText id="idRua" value="#{cadastroBean.endereco.rua}" />

				<p:outputLabel value="Número" />
				<p:inputText id="idNumero" value="#{cadastroBean.endereco.numCasa}" />

				<p:outputLabel value="Complemento" />
				<p:inputText id="idComplemento"
					value="#{cadastroBean.endereco.complemento}" />

				<p:commandButton actionListener="#{cadastroBean.cadastra}"
					update="@form" />
			</h:panelGrid>


		</h:form>

	</ui:define>


</ui:composition>
</html>